<template>
  <page child>
    <div class="close" v-if="!lock">
      <!-- <van-icon name="warning" /> -->
      未授权访问，请联系管理员开启该功能
    </div>
    <van-pull-refresh
      class="scroll home"
      v-model="isRefresh"
      @refresh="onRefresh"
    >
      <div style="padding-top: 1px">
        <div class="fixed-header"></div>
        <div class="search-group" @click="search">
          <van-icon name="search" />
          <div class="input">搜索</div>
        </div>
        <div class="content-group">
          <!--轮播-->
          <div class="banner">
            <van-swipe
              loop
              class="my-swipe"
              :autoplay="4000"
              indicator-color="white"
              height="140"
              @change="onChange"
            >
              <template v-for="item in banner">
                <van-swipe-item>
                  <img :src="showImg(item.url)" />
                </van-swipe-item>
              </template>

              <template #indicator>
                <div class="custom-indicator">
                  <div v-for="i in banner.length" :key="i">
                    <img
                      src="~@/assets/images/icons/dot.png"
                      class="not_active"
                      v-if="i - 1 != current"
                    />
                    <img
                      src="~@/assets/images/icons/dot_active.png"
                      class="active"
                      v-else
                    />
                  </div>
                </div>
              </template>
            </van-swipe>
          </div>

          <!--公告-->
          <div class="notice-group">
            <van-notice-bar
              left-icon="volume-o"
              scrollable
              :scrollable="false"
              background="#D0E4FF"
              color="#1677FF"
            >
              <!-- <a
                href="javascript: void(0);"
                slot="right-icon"
                class="content-text"
                @click="$router.push('notice')"
                >全部</a
              > -->
              <van-swipe
                vertical
                class="notice-swipe"
                :autoplay="6000"
                :show-indicators="false"
              >
                {{ notice }}
                <!-- <template v-for="item in notice">
                  <van-swipe-item
                    @click="$router.push(`notice/detail/${item.id}`)"
                  >
                    <span class="content-text">{{ item.title }}</span>
                  </van-swipe-item>
                </template> -->
              </van-swipe>
            </van-notice-bar>
          </div>

          <!--关联产品-->
          <div class="tabs-group">
            <van-tabs
              v-model="active"
              :border="false"
              background="#FAFBFD"
              color="#0B56A6"
              line-width="30"
              @change="changeTab"
              animated
            >
              <template v-for="(product, index) in productType">
                <van-tab>
                  <span
                    @click="tabClick(product,index)"
                    slot="title"
                    class="tab-title"
                    :class="active === index && 'active'"
                    >{{ product.dictLabel }}</span
                  >
                  <div class="tab-content">
                    <div
                      class="list"
                      :style="`width: calc(1.55rem * ${
                        product.product.length
                      } + (10px * ${
                        product.product.length + 1
                      }));height: 204px;`"
                    >
                      <card
                        class="list-item"
                        v-for="item in product.product"
                        :key="item.id"
                        @click="handleApply(item)"
                      >
                        <div class="bank-group">
                          <img
                            v-lazy="showImg(item.url)"
                            alt=""
                            class="bank"
                          />
                        </div>
                        <div class="list-item-detail">
                          <span class="product-name">{{
                            item.name
                          }}</span>
                          <span class="price"
                            >最高<span>{{ item.quantityMax }}元</span></span
                          >
                          <span class="desc">年化{{
                            item.costMin
                          }}~{{item.costMax}}</span>
                          <div class="tag-group">
                            <span>{{ item.repayType }}</span>
                            <span>{{ item.loansTime }}期</span>
                          </div>
                        </div>
                        <span class="tip">热门</span>
                      </card>
                    </div>
                  </div>
                </van-tab>
              </template>
            </van-tabs>
          </div>

          <!--推荐产品-->
          <div class="pro-title">
            <span>推荐产品</span>
            <div class="all" @click="$router.push('/product/all')">
              <a href="javascript: void (0)">全部</a>
              <van-icon name="arrow" />
            </div>
          </div>
          <div class="product-list">
            <template v-for="item in productList">
              <business @handleApply="handleApply" :item="item"></business>
            </template>
          </div>
        </div>
      </div>
    </van-pull-refresh>
  </page>
</template>

<script>
import business from "@/components/business.vue";
import vRefresh from "@/components/refresh";
import { mapGetters, mapMutations } from "vuex";
export default {
  name: "index",
  computed: { ...mapGetters(["ifFirst", "homeData"]) },
  components: { vRefresh, business },
  data() {
    return {
      isRefresh: false,
      current: 0,
      active: 0,
      banner: [],
      notice: "",
      productList: [],
      productType: [
        {
          name: "",
          product: [],
        },
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      lock: false,
    };
  },

  created() {
    this.init();
  },

  mounted() {
    setTimeout((_) => {
      if (window.history && window.history.pushState) {
        history.pushState(null, null, document.URL);
        window.addEventListener("popstate", this.closeWindow, false);
      }
    });
  },

  destroyed() {
    window.removeEventListener("popstate", this.closeWindow);
  },

  methods: {
    async getConfig() {
      this.$http.get("/system/config/20").then(res=>{
        console.log("resresresres",res)
        if (res.data.configValue == "true") {
          this.lock = true;
        } else if (res.data.configValue == "false") {
          this.lock = false;
        } else {
          this.lock = false;
        }
      })
      // getConfig(20).then((res) => {
      //   if (res.data.configValue == "true") {
      //     this.lock = true;
      //   } else if (res.data.configValue == "false") {
      //     this.lock = false;
      //   } else {
      //     this.lock = false;
      //   }
      //   this.configData = res.data;
      // });
    },
    ...mapMutations(["SET_IF_FIRST", "SET_HOME_DATA"]),

    itemClick(item) {
      if (!item.targetUrl) return;
      window.location.href = item.targetUrl;
    },

    closeWindow() {
      wx.closeWindow();
    },

    async init() {
      if (this.ifFirst) {
        await this.getIndexAllData();
        setTimeout((_) => {
          this.SET_IF_FIRST(false);
          this.SET_HOME_DATA(this._data);
        }, 200);
      } else {
        this._data = this.homeData;
      }
    },

    //刷新
    async onRefresh() {
      try {
        await this.getIndexAllData();
      } finally {
        this.isRefresh = false;
      }
    },

    //分类点击事件
    async tabClick(item,index) {
      console.log(item,index);
      await this.getProductForType(index);
      // if (!item.product.length) {
      //   this.$toast.none("敬请期待");
      // }
    },

    changeTab(index) {
      this.active = index;
    },

    //获取首页所有接口
    async getIndexAllData() {
      this.$loading();
      try {
        await this.getConfig();
        await this.getBanner();
        await this.getNotice();
        await this.getProductTypeList();
        await this.getProductForType(0);
        await this.getProductList();
      } catch (e) {
        this.$toast.error("获取数据失败");
      } finally {
        this.$loading.close();
      }
    },

    //根据类型获取产品
    async getProductForType(index) {
      let queryParams = {
        pageNum: 1,
        pageSize: 10,
        recommendOrHot: 2,
        type: this.productType[index].dictLabel,
      };
      const res = await this.$http.post("/product/list",queryParams);
      this.productType[index].product = res.data.records;
    },

    //获取系统公告
    async getNotice() {
      const res = await this.$http.get(`/system/config/21`);
      this.notice = res.data.configValue;
    },
    // 获取产品类型
    async getProductTypeList() {
      const res = await this.$http.get("/system/dict/data/type/product_type");
      this.productType = res.data.map(item=>{
        return {...item,product:[]}
      });
    },

    async getProductList() {
      let queryParams = {
        pageNum: 1,
        pageSize: 10,
        recommendOrHot: 1,
      };
      const res = await this.$http.post("/product/list",queryParams);
      this.productList = res.data.records;
      // const res = await this.$http.get(
      //   "/common/mp/product/list/associateRecommendation"
      // );
      // this.productList = res.data;
    },

    async getBanner() {
      const res = await this.$http.post("/banner/list", this.queryParams);
      this.banner = res.data.records;
    },
    search() {
      this.$router.push("/product/filter");
    },
    onChange(index) {
      this.current = index;
    },
    handleApply(item) {
      //this.$toast.success('下载模板失败','请确认后台已上传模板');
      this.$router.push(`/productDetail/${item.id}`);
    },

    goDetail(item) {
      this.$router.push(`/productDetail/${item.id}`);
    },
  },
};
</script>

<style scoped lang="less">
.close{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  background: #fff;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home {
  height: calc(100vh - @tabbar-height - 1px);
  overflow-y: auto;
  padding-top: 1px;
  .fixed-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1.3rem;
    background-color: @theme-color;
    z-index: -1;
  }

  .search-group {
    height: 0.3rem;
    min-height: 0.3rem;
    margin: 10px @padding;
    border: 1px solid #fff;
    border-radius: 0.3rem;
    display: flex;
    align-items: center;
    cursor: pointer;

    i {
      color: #ccc;
      font-size: 18px;
      margin-right: 5px;
      margin-left: 5px;
    }

    .input {
      color: #999;
      flex: 1;
      display: flex;
      align-items: center;
      background-color: transparent;
      height: 100%;
      font-size: @small;
    }
  }

  .content-group {
    padding-top: @padding;
    //height: calc(100vh - @tabbar-height - .33rem);

    .banner {
      .my-swipe .van-swipe-item {
        display: flex;
        justify-content: center;

        img {
          width: calc(100% - 10px * 2);
          border-radius: @card-radius;
        }
      }

      .custom-indicator {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;

        .not_active {
          width: 5px;
        }

        .active {
          height: 5px;
        }

        img {
          margin-right: 3px;
        }
      }
    }

    .notice-group {
      background: rgba(250, 251, 253, 1);
      margin-top: @padding;

      .notice-swipe {
        height: 40px;
        line-height: 40px;
      }

      .content-text {
        color: #1677ff;
      }
    }

    .tabs-group {
      padding-top: @padding;
      background-color: #fafbfd;

      .tab-title {
        font-size: @big;
        font-weight: 700;
        cursor: pointer;
        &:not(.active) {
          color: #acacac;
        }

        &.active {
          color: @theme-color;
        }
      }

      .tab-content {
        width: 100%;
        overflow-x: auto;
        padding-bottom: @padding;

        .list {
          padding-top: @padding;
          display: flex;
          flex-wrap: wrap;

          &-item {
            box-sizing: border-box;
            width: 1.55rem;
            margin-left: 10px;
            padding: 0 @padding @padding;
            position: relative;
            background-color: #fff;

            .tip {
              position: absolute;
              top: 10px;
              left: 10px;
              color: #fff;
              background: rgb(253, 73, 16);
              font-size: 8px;
              padding: 0 3px;
              border-radius: 3px;
              display: flex;
            }

            .bank-group {
              display: flex;
              align-items: center;
              justify-content: center;
              height: 0.9rem;

              .bank {
                width: 0.74rem;
              }
            }

            &-detail {
              display: flex;
              flex-direction: column;
              margin-top: 5px;

              .product-name {
                font-size: @mini;
              }

              .price {
                margin-top: 2px;
                font-size: @small;
                font-weight: 600;

                span {
                  color: @price-color;
                }
              }

              .desc {
                color: #999;
                font-size: @mini;
                margin-top: 3px;
              }

              .tag-group {
                display: flex;
                align-items: center;
                flex-wrap: nowrap;
                overflow-y: hidden;
                margin-top: 3px;

                span {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  background: #ffece3;
                  color: #ff6010;
                  margin-right: 5px;
                  padding: 0 3px;
                  border-radius: 3px;
                  font-size: 7px;
                }
              }
            }
          }
        }
      }
    }

    .pro-title {
      background: rgba(250, 251, 253, 1);
      display: flex;
      justify-content: space-between;
      padding: @padding;

      span {
        font-size: @md;
        font-weight: 700;
      }

      .all {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        cursor: pointer;
      }

      a {
        font-size: @small;
        color: #acacac;
      }

      i {
        margin-left: 5px;
        color: #acacac;
        font-size: @large;
        margin-top: -2px;
      }
    }

    .product-list {
      background: rgba(250, 251, 253, 1);
      padding-bottom: 1px;
    }
  }
}
</style>
